11. Document and Viewport

Remembering the difference between document and viewport is crucial for the next two layout flows: position: absolute and position: fixed.

The "document" is another name for the entire DOM.

The document is a reference to the DOM - the big tree you’ve been building with HTML elements. The document is the entire page, from top to bottom, header to footer, as far as you can scroll.

The "window" is the visible portion of the DOM.

The viewport is the portion of the DOM that is currently visible inside the browser window. The viewport’s size depends on the browser dimensions, and as such will change depending on factors like screen resolution, window size, device orientation (landscape vs. portrait views on phones and tablets) and device pixel ratio.

As you scroll through a page, the viewport moves along the document like so:

Absolute and fixed layouts allow you to specify the location of an element with respect to the document or the viewport. Keep going to see how.